<template>
  <div id="achievement">
    <div class="top">
      <navbar v-model="selected">
        <tab-item
          v-for="(item, index) in lists"
          :key="index"
          :id="index">{{ item.text }}</tab-item>
      </navbar>
    </div>

    <grey-header title="*业绩不包含车船税"></grey-header>

    <tab-container v-model="selected">
      <tab-container-item
        v-for="(item, index) in lists"
        :key="index"
        :id="index">
        <table>
          <thead>
          <tr class="header">
            <td v-for="(item, index) in headers" :key="index">{{ item }}</td>
          </tr>
          </thead>
          <tbody>
          <tr
            class="article"
            v-for="(subItem, subIndex) in lists[index].contents"
            :key="subIndex">
            <td>{{ subItem[attrOneName] }}</td>
            <td>{{ subItem[attrTwoName] }}元</td>
          </tr>
          </tbody>
        </table>
      </tab-container-item>
    </tab-container>

    <empty-message message="暂无记录" v-if="!this.lists[this.selected].contents.length"></empty-message>
  </div>
</template>

<script>
  import GreyHeader from '../comp/grey-header.vue';
  import EmptyMessage from '../comp/empty-message.vue';
  import { Navbar, TabItem, TabContainer, TabContainerItem } from 'mint-ui';
  export default {
    name: "achievement",
    props: ['headers', 'lists', 'attrOneName', 'attrTwoName'],
    components: {
      GreyHeader,
      Navbar,
      TabItem,
      TabContainer,
      TabContainerItem,
      EmptyMessage
    },
    data() {
      return {
        selected: 1
      }
    }
  }
</script>

<style lang="scss">

  #achievement {
    padding-top: 8.5rem; // navbar+margin

    $this-public-padding: 0 .8rem;

    >.top {
      position: fixed;
      top: 0;
      width: $size-as-parent;
      background: #c3e9ff;
      z-index: $just-z-index;

      >.mint-navbar {
        height: 7.5rem;
        padding: $this-public-padding;
        margin-bottom: 1rem;

        $active-color: #0196ff;

        >a {
          display: flex;
          justify-content: space-around;
          align-items: center;

          >.mint-tab-item-label {
            font-size: 1.5rem;
            color: #333;
          }

          &.is-selected {
            border-bottom: 3px solid $active-color;

            >.mint-tab-item-label {
              font-size: 1.5rem;
              color: $active-color;
            }
          }
        }
      }
    }

    >.mint-tab-container {
      table {
        width: $size-as-parent;

        .header {
          height: 5rem;
          padding: $this-public-padding;
          background: #e9f6ff;

          >td {
            font-size: 1.5rem;
            text-align: center;
            color: #333;
          }
        }

        .article {

          $height: 5rem;

          height: $height;
          padding: $this-public-padding;
          border-bottom: 1px solid #eee;
          background: $white;

          >td {
            font-size: 1.2rem;
            color: #333;
            line-height: $height;
            text-align: center;
          }
        }
      }
    }
  }
</style>
